<template>
  <div style="width: 100%; height: 100%;">
    <el-row>
      <el-col :span="12">
        <div class="map-title">部门统计柱状图</div>
        <ve-histogram :data="chartData" width="100%" :settings="chartSettings" :extend="extend"></ve-histogram>
      </el-col>
      <el-col :span="12">
        <div class="map-title">部门统计环状图</div>
        <ve-ring width="100%" :data="chartData"></ve-ring>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as chart from '@/api/chart'
import * as department from '@/api/department'
import * as common from '@/common.js'

export default {
  name: 'AssetDepartment',
  data () {
    this.extend = {
      series: {
        label: {
          show: true,
          position: 'top'
        },
        barWidth: 40
      }
    }
    return {
      chartSettings: {
        labelMap: {
          'department': '部门',
          'num': '数量'
        }
      },
      data: []
    }
  },
  computed: {
    chartData: function () {
      return {
        columns: ['department', 'num'],
        rows: this.data
      }
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    async loadData () {
      let resp = await chart.getData('department')
      const data = resp.data
      const ids = data.map(e => e.depa_id)
      resp = await department.selectByIds(ids)
      const map = common.toMap(resp.data, 'id', 'name')
      data.forEach(e => {
        e.department = map.get(e.depa_id)
      })
      this.data = data
    }
  }
}
</script>

<style scoped>
  .map-title {
    font-weight: bold;
    font-size: 16px;
    margin: 10px auto;
  }
</style>
